<template>
    <div class="person">
    <ul>
        <li v-for="item in list" :key="item.id">
            {{ item.name }} -- {{ item.age }}
        </li>
    </ul>        
    </div>
</template>

<script setup lang="ts" name="Person">
    import { defineProps } from 'vue';
    import {type Persons } from '@/types';
    import { withDefaults } from 'vue';
    //接收a
    // defineProps(['a','list'])//和<Person a="哈哈" :list="personList"/>对应

    //接收a，同时将Props保存起来
    // let x = defineProps(['a','list'])//x是对象，包含所有传来的key,value
    // console.log(x.list)//使用保存后的a

    //接收list + 限制类型（list必须是Persons类型）
    // defineProps<{list:Persons}>()

    //接收list + 限制类型 + 限制必要性（加？，可传可不传） + 指定默认值(用withDefaults函数实现)
    withDefaults(defineProps<{list?:Persons}>(),{
        list:()=> [{id:'04',name:"agd",age:17}]
    })//参2为默认值，一个对象，里面是键值对
</script>
    
// <!-- //scoped：局部样式，确保.person只对对应文件生效 -->
<style scoped>
    .person {
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding:20px;
    }
    button {
        margin: 0 5px;
    }
    ul li {
        font-size: 20px;
    }
</style>